<template>
  <div>
    <page-nav :titlearr="titlearr"></page-nav>
    <div class="admin_form">
      <div>
        <el-input v-model="searchText"></el-input>
        <el-button type="primary"
                   @click="search">查询</el-button>
      </div>
      <el-button type="success"
                 @click="add">添加</el-button>
    </div>
    <admin-table></admin-table>
    <admin-alert></admin-alert>
  </div>
</template>
<script>
import pageNav from '../../components/pageNav'
import adminTable from '../admin/adminTable'
import adminAlert from './adminAlert'
import { mapActions, mapMutations } from 'vuex'
export default {
  name: "admin",
  components: { pageNav, adminTable, adminAlert },
  methods: {
    ...mapMutations("adminStore", ["changeDialogVisble", "changeEidtId", "changeTitleAndBtn", "changeEidtRow"]),
    ...mapActions("adminStore", ["getAdminAction"]),
    search () {
      // 传入查询条件 完成查询
      this.getAdminAction({ searchText: this.searchText })
      this.searchText = ""  //清空输入框
    },
    add () {
      this.changeDialogVisble(true)//打开添加弹出层
      this.changeTitleAndBtn(["添加管理员", "确认添加"]) //修改弹出的标题和按钮
      this.changeEidtId("") //清空修改id
      this.changeEidtRow(null)//清空修改的当前行数据
    }
  },
  data () {
    return {
      searchText: "",
      titlearr: [
        { name: "home", text: "首页" },
        { name: "admin", text: "用户管理" },
        { name: "admin", text: "系统人员" },
      ]
    }
  }
}
</script>
<style lang="less">
.admin_form {
  width: 1300px;
  margin: 10px auto;
  display: flex;
  background: white;
  justify-content: space-between;
  height: 50px;
  div {
    display: flex;
    .el-input__inner {
      height: 50px;
    }
  }
}
</style>